<template>
  <div v-transfer-dom>
  <x-dialog v-model="show" class="dialog-demo" :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent'}">
    <div id="coupons-daily-bonus">
      <div class="coupons-daily-bonus-container">
        <div class="dbp-close-btn" @click="show = false">
          <i class="vux-close"></i>
        </div>
        <div class="backgroud-img"></div>
        <div class="dbp-content">
          <div class="go-to-sign" @click="get()">
            <span>点击<br>领取</span>
          </div>
          <div class="dbp-title">每日领取优惠券</div>
          <div class="dbp-tips">优惠券可抵扣人民币</div>
        </div>
      </div>
    </div>
  </x-dialog>
</div>
</template>
<script>
  import { XDialog, TransferDomDirective as TransferDom } from 'vux'
  export default {
    directives: {
      TransferDom
    },
    components: {
      XDialog
    },
    data () {
      return {
        coupon: null,
        show: false
      }
    },
    methods: {
      get () {
        this.$http.post('/user_coupons', {coupon_id: this.coupon.id}).then((response) => {
          this.show = false
          this.$vux.alert.show({
            title: '恭喜您',
            content: '获得' + response.data.money + '元优惠券, 点击确定查看',
            onHide: () => {
              this.$router.push('/coupons')
            }
          })
        }).catch((error) => {
          console.log(error)
          this.show = false
          this.$router.push('/coupons')
        })
      },
      _getData (today) {
        this.$http.get('/daily/coupons').then((response) => {
          if (response.data && response.data.id) {
            localStorage.setItem('dailyCoupon', today)
            this.coupon = response.data
            this.show = true
          }
        }).catch((error) => {
          console.log(error)
        })
      }
    },
    mounted () {
      let date = new Date()
      let today = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
      let dailyCoupon = localStorage.getItem('dailyCoupon')
      // 已经领取过
      if (dailyCoupon !== today) {
        setTimeout(this._getData(today), 1500)
      }
    }
  }
</script>
<style scoped>
#coupons-daily-bonus {
  margin-top: 9px;
}
.coupons-daily-bonus-container {
  height: 333px;
  width: 297px;
  color: #000;
  margin: auto;
  position: relative;
  border-radius: 8px;
  background: url(./images/db_redpacket.png) 50% no-repeat;
  background-size: 255px 318px;
}
.coupons-daily-bonus-container .dbp-close-btn {
  background-color: #e0e0e0;
  width: 30px;
  height: 30px;
  border-radius: 16px;
  position: absolute;
  top: -9px;
  right: 7px;
  z-index: 10008;
}
.coupons-daily-bonus-container .dbp-close-btn .vux-close {
  margin-top: 3px;
  margin-left: 3px;
}
.coupons-daily-bonus-container .backgroud-img {
  position: absolute;
  top: 0;
  left: 6px;
  width: 100%;
  height: 100%;
  background: url(./images/colorful.png) no-repeat;
  background-size: 299px 312px;
}
.coupons-daily-bonus-container .dbp-content {
  text-align: center;
  position: absolute;
  width: 297px;
  top: 50px;
}
.coupons-daily-bonus-container .go-to-sign {
  top: 50px;
  padding: 25px 0;
  line-height: 26px;
  margin: 0 auto;
  color: #e03223;
  font-size: 22px;
  width: 102px;
  height: 52px;
  border-radius: 51px;
  background: #ffdb25;
  font-weight: bolder;
  box-shadow: inset 0 0 5px 5px #ffef4d;
}
.coupons-daily-bonus-container .dbp-title {
  margin-top: 50px;
  line-height: 40px;
  color: #ffd500;
  font-size: 29px;
  text-align: center;
  font-weight: 700;
}
.coupons-daily-bonus-container .dbp-tips {
  font-size: 17px;
  color: #fff;
  line-height: 24px;
}
</style>